今天來介紹 CSS 的 Cascading 和 specificity。
「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看 ?。
「重新認識 CSS」系列文章發文於：
CSS 可以在同份文件上使用多個 style sheet 來設定文件的樣式。如果你在不同 style sheet 內對同一個元素或屬性設定值時，就會 CSS 會透過 cascading 這個特性來解決這個衝突。
cascade 會使用各元素上屬性的 declared value 的無序列表，透過下面所述的 Cascading 流程，以宣告的優先度從高到低進行排序，並輸出一個 cascaded value：
!important
各種來源的優先度按降序 (高到低) 排列：
選擇器的 specificity 計算方式的背後是計算 a、b、c 和 d 個四個數字，此方法會分別在各個 selector 上計算，四個數字各別如下：
a：如果在直接在 HTML 元素上設定 style 屬性，那 a = 1，否則為 0b：計算使用 ID selector 的數量c：計算使用 class selector、attributes selector 和 pseudo-class 的數量d：計算使用 type selector 和 pseudo-element 的數量另外還有幾點要特別注意：
id 屬性 (例如：[id=titan] )，也還是算成 attributes selector (也就是 a = 0、b = 0、c = 1 和 d = 0 )下面是 CSS 2.2 提供的 specificity 範例：
下面舉個實際的範例；
<head>
<style type="text/css">
#titan { color: red; }
</style>
</head>
<body>
<p id="titan" style="color: green">
</body>
因為 p 元素有設定 style 屬性，會覆蓋 style 元素中 以 ID selector #titan 的宣告 (因為 style 屬性的 specificity 更高)，所以 p 元素的文字結果為綠色。
越放在 HTML 最後的宣告優先度越高：
style 屬性的宣告是根據 style 屬性出現在該元素的文件順序來排序，並且全部放在任何 style sheet 之後資料來源：
iThome鐵人賽
看影片追技術